<!-- tabbar -- 我的页面 -->
<template>
	<view class="content">
		<!-- 头部包括头像昵称等 -->
		<view class="header">
			<img src="./images/touxiang.jpeg" alt="" />
			<view class="personName">
				<text>小孙吃肉不吃面</text>
				<view class="certification" @click="information">马上认证</view>
			</view>
		</view>
		<!-- 个人信息，承运合同，银行卡 -->
		<view class="personalAuthentication">
			<!-- 个人信息 -->
			<view class="list">
				<view class="leftMsg">
					<u-icon name="account-fill"></u-icon>
					<text>个人信息</text>
				</view>
				<text class="uncertification" @click="information">待认证 ></text>
			</view>
			<view class="uLine"></view>
			<!-- 承运合同 -->
			<view class="list">
				<view class="leftMsg">
					<u-icon name="order"></u-icon>
					<text>承运合同</text>
				</view>
				<text class="uncertification">待认证 ></text>
			</view>
			<view class="uLine"></view>
			<!-- 银行卡 -->
			<view class="list">
				<view class="leftMsg">
					<u-icon name="coupon"></u-icon>
					<text>银行卡</text>
				</view>
				<text class="uncertification">待认证 ></text>
			</view>
		</view>
		<!-- 我的车辆，我的车队 -->
		<view class="myCar">
			<!-- 我的车辆 -->
			<view class="list">
				<view class="leftMsg">
					<u-icon name="car"></u-icon>
					<text>我的车辆</text>
				</view>
				<text class="uncertification">待认证 ></text>
			</view>
			<view class="uLine"></view>
			<!-- 我的车队 -->
			<view class="list">
				<view class="leftMsg">
					<u-icon name="car"></u-icon>
					<text>我的车队</text>
				</view>
				<text class="uncertification">></text>
			</view>
		</view>
		<!-- 代收管理 -->
		<view class="collecting">
			<view class="list">
				<view class="leftMsg">
					<u-icon name="car"></u-icon>
					<text>代收管理</text>
				</view>
				<text class="uncertification">></text>
			</view>
		</view>
		<!-- 常见问题及以下部分 -->
		<view class="qa">
			<!-- 常见问题 -->
			<navigator animation-type="pop-in" animation-duration="300" url="/pages/personal/components/questions">
				<view class="list">
					<view class="leftMsg">
						<u-icon name="question-circle"></u-icon>
						<text>常见问题</text>
					</view>
					<text class="uncertification">></text>
				</view>
			</navigator>
			<view class="uLine"></view>
			<!-- 法律条款与平台规则 -->
			<navigator animation-type="pop-in" animation-duration="300" url="/pages/personal/components/legal">
				<view class="list">
					<view class="leftMsg">
						<u-icon name="info-circle"></u-icon>
						<text>法律条款与平台规则</text>
					</view>
					<text class="uncertification">></text>
				</view>
			</navigator>
			<!-- 下载手机APP -->
			<view class="list" @click="showModal">
				<view class="leftMsg">
					<u-icon name="arrow-downward"></u-icon>
					<text>下载手机APP</text>
				</view>
				<text class="uncertification">></text>
			</view>
			<view class="uLine"></view>
			<!-- 弹框modal -->
			<u-modal v-model="show" width="70%" :mask-close-able="true" :zoom="false" confirm-text="联系客服" :show-title="title" @confirm="toChat()">
				<view class="slot-content">
					<view><u-icon name="server-fill" color="#2979ff" size="180"></u-icon></view>
					<view><text>立即联系客服，获取下载地址</text></view>
				</view>
			</u-modal>
		</view>
		<u-tabbar :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { token } from '../../api/index.js';
export default {
	name: 'Personal',
	data() {
		return {
			show: false, //是否显示modal
			title: false
		};
	},
	mounted() {
		this.getUserInfo();
	},
	methods: {
		getUserInfo() {
			token({})
				.then(res => {
					const { data } = res;
					console.log(data, 'aa');
				})
				.catch(err => {
					uni.showToast({
						title: '获取数据失败:' + err,
						duration: 1000,
						icon: 'none'
					});
				});
		},

		information() {
			uni.navigateTo({
				url: '/pages/personal/information/information'
			});
		},

		showModal() {
			this.show = true;
		},

		//跳转到客服页面
		toChat() {}
	},
	computed: {
		...mapGetters(['tabbar'])
	}
};
</script>
<style lang="stylus" scoped>
.content
	text-align center
	background #f2f2f4
	height 900px
	.header
		width 100%
		height 350upx
		background rgb(78, 56, 226)
		display flex
		align-items center
		img
			margin-left 30upx
			width 150upx
			height 150upx
			border-radius 50%
			border 2px solid #FFFFFF
			// x轴-y轴-模糊度-颜色
			box-shadow 5px 5px 20px #331bd3
		.certification
			width 150upx
			height 47upx
			font-size 22upx
			border-radius 25px
			background #7561e8
			color #d28889
			text-align center
			line-height 47upx
			margin-top 20upx
		.personName
			font-size 36upx
			color #eee4ff
			margin-left 30upx
			display flex
			flex-direction column
	.personalAuthentication
		width 100%
		height 272upx
		background #FFFFFF
		.list
			height 90upx
			line-height 90upx
			display flex
			.leftMsg
				display flex
				justify-content flex-start
				align-items center
				padding-left 30upx
				color #48474c
				text
					padding-left 10upx
			.uncertification
				flex 1
				display flex
				justify-content flex-end
				align-items center
				padding-right 37upx
				color #9d9d9d
		.uLine
			height 1upx
			width 90%
			background #f8f8f8
			margin 0 auto
	.myCar
		margin-top 20upx
		width 100%
		height 181upx
		background #FFFFFF
		.list
			height 90upx
			line-height 90upx
			display flex
			.leftMsg
				display flex
				justify-content flex-start
				align-items center
				padding-left 30upx
				color #48474c
				text
					padding-left 10upx
			.uncertification
				flex 1
				display flex
				justify-content flex-end
				align-items center
				padding-right 37upx
				color #9d9d9d
		.uLine
			height 1upx
			width 90%
			background #f8f8f8
			margin 0 auto
	.collecting
		margin-top 20upx
		width 100%
		height 91upx
		background #FFFFFF
		.list
			height 90upx
			line-height 90upx
			display flex
			.leftMsg
				display flex
				justify-content flex-start
				align-items center
				padding-left 30upx
				color #48474c
				text
					padding-left 10upx
			.uncertification
				flex 1
				display flex
				justify-content flex-end
				align-items center
				padding-right 37upx
				color #9d9d9d
	.qa
		margin-top 20upx
		width 100%
		height 272upx
		background #FFFFFF
		.list
			height 90upx
			line-height 90upx
			display flex
			.leftMsg
				display flex
				justify-content flex-start
				align-items center
				padding-left 30upx
				color #48474c
				text
					padding-left 10upx
			.uncertification
				flex 1
				display flex
				justify-content flex-end
				align-items center
				padding-right 37upx
				color #9d9d9d
		.uLine
			height 1upx
			width 90%
			background #f8f8f8
			margin 0 auto
</style>
